<html>
	<head>
		<script type="text/javascript" src="../js/json2.js"></script>
		<script type="text/javascript" src="../js/kcm.js"></script>
		<script type="text/javascript" src="../js/Grid.js"></script>
		<script type="text/javascript" src="../js/Yarn.js"></script>
		<script type="text/javascript" src="../js/Stitch.js"></script>
		<script type="text/javascript" src="../js/Chart.js"></script>
		<script type="text/javascript" src="../js/ChartGrid.js"></script>
		<script type="text/javascript" src="../js/KnittingChartMaker.js"></script>
		<script type="text/javascript" src="../js/jscolor/jscolor.js"></script>
		
		<style>
			/* prevents text being selected */
			body {
				background: #DDDDDD;
				-moz-user-select: none;
				-khtml-user-select: none;
			}
		</style>
		
		<title>Knitting Chart Maker</title>
	</head>
	<body>
		<div id="kcm_chart_options">
			<label for="kcm_chart_width">Chart Size: </label>
			<input type="text" size="3" id="kcm_chart_width" />
			<span>X</span>
			<input type="text" size="3" id="kcm_chart_height" />
			<input type="button" id="kcm_chart_resize" value="Resize" />
			
			<label for="kcm_chart_stitch">Stitch: </label>
			<select id="kcm_chart_stitch" />
			<input type="text" size="2" id="kcm_chart_stitch_size" />
			
			<label for="kcm_chart_yarn">Yarn: </label>
			<select id="kcm_chart_yarn" />
			<input type="text" size="7" id="kcm_chart_yarn_colour" />
			
			<input type="button" id="kcm_chart_save" value="Save" />
			<input type="button" id="kcm_chart_load" value="Load" />
			<input type="button" id="kcm_chart_img_png" value="Image (PNG)" />
			<input type="button" id="kcm_chart_img_svg" value="Image (SVG)" />
		</div>
		
		<br/>
		
		<canvas id="kcm_canvas">
			<p>Unable to use Knitting Chart Maker with this browser</p>
		</canvas>
	</body>
</html>
